<?php
  
  include_once 'islogin.php';
  include_once 'fun.php';
  $_SESSION['isadmin']=isset($_SESSION['isadmin'])?$_SESSION['isadmin']:'';
  if ($_SESSION['isadmin']!=2&&$_SESSION['isadmin']!=-1) {
      header('Refresh:1;url=shop.php');
      die("请以柜台管理员身份登录");
  }
  $con=connect();
  $name = isset($_GET['Name'])?trim($_GET['Name']):'';
  $sql="SELECT productid,Name,stocknum,counternum FROM product WHERE productid in (SELECT productid FROM product LEFT JOIN counter USING(productid) WHERE counter.productid is NULL)";
  $res=query($sql, $con);
  $result1=array();
  $result2=array();
  while ($row = mysqli_fetch_all($res)) {
      $result1=$row;
  }//var_dump($result1);
  if ($name) {
      $sql = "select * from counter where Name like '%$name%'  order by  Name ASC ";
  } else {
     $sql = "select * from counter order by CONVERT (Name USING gbk)";
 }
  
  $res = query($sql, $con);
  $result=array();
  
  $temp=array();
  if ($res->num_rows!=0) {
      while ($row = mysqli_fetch_assoc($res)) {
          
          if ($row['productid']) {
              $res1=query("select Name from product where productid like {$row['productid']}", $con) ;
              $a=mysqli_fetch_row($res1);
              $productName=$a[0];
              
          } else {
              $productName='';
          }
          $res2=query("select Name from manager where managerid in (select managerid from cou_man where counterid like {$row['counterid']})", $con);
          $stuffName='';
          if ($res2->num_rows>0) {
              for ($i=0;$i<$res2->num_rows;$i++) {
                  
                  $b= mysqli_fetch_row($res2);
                  $str=$b[0];
                  // echo $str;
                  if ($i>0) {
                      $stuffName.=',';
                  }
                  $stuffName.=$str;
              }
          } else {
              $stuffName='';
          }
          $temp['CounterName']=$row['Name'];
          $temp['ProductName']=$productName;
          $temp['StuffName']=$stuffName;
          $temp['id']=$row['counterid'];
          array_push($result, $temp);
      }
  }
$sql = "select managerid,Name from manager  order by CONVERT (Name USING gbk)";
$res = query($sql, $con);
while ($row = mysqli_fetch_all($res)) {
    $result2=$row;
}
//var_dump(($result2));
// var_dump($result1);
 $str='';
 for ($i=0;$i<count($result, 0);$i++) {
     $str.="{name:"."'".$result[$i]['CounterName']."'".","."price:"."'".$result[$i]['ProductName']."',"."number:"."'".$result[$i]['StuffName']."',"."id:".$result[$i]['id']."}";
     if ($i<count($result, 0)-1) {
         $str.=',';
     }
 }
 //echo $str;


?>
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>柜存修改</title>
   <!-- // <script src="../网页设计/库存修改.js"></script> -->

</head>
<style>
    .titlei{
        width: 90%;
        height: 40px;
        background-color: #333;
        color: white;
        text-align: center;
        font-weight: 500;
        font-size: 20px;
        padding-top: 5px;
    }
    .delete{
        width: 80px;
        height: 30px;
        
    }
  .delete:hover{
       background: #333;
       color: white;
   }
    .edit:hover{
        background: #333;
       color: white;
    }
   .edit{
       
       width: 80px;
        height: 30px;
       text-align:center;
   }
    ._button{
        background-color: grey;
        border: none;
        padding: 10px;
        color: white;
        text-align: center;
        font-size: 10px;
        margin-top: 0px;
        margin-right: 50px;
        margin-left: 50px;
        cursor: pointer;
    }
    
    ._button:hover{
        transition: all 0.5s;
        background: #333;
        color: white;
    }
   .content{
       margin-top: 20px;
       background-color: #eee;
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
   }
    .buttontwo{
        margin-top: 15px;
    }
    .editblock{
        width: 300px;
        height: 300px;    
        text-align: center;
        margin-left: 25%;
        margin-top: -100px;    
        z-index: 1;
        border-radius: 10px;
        /* left: calc(100%-50px); */
        position:absolute;
    }
    .editblock .contenti{
        position:absolute;
        left: calc(50% - 210px);
        width: 300px;
        height: 300px;
    }
    .close{
     color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    }

    .close:hover,
    .close:focus{
    color: black;
    text-decoration: none;
    cursor: pointer;
    }
    .contenti{
        background: #eee;
        border-radius: 10px;
        
    }
  .contenti .title .editblock{
   
	display: flex;
	justify-content: space-between;
	/* 鼠标移入呈现移动光标 */
	cursor: move;

    }
    .customers {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 70%;
      margin-top: 20px
    }
    
    .customers td, .customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    .customers tr:nth-child(even){background-color: #f2f2f2;}
    
    .customers tr:hover {background-color: #ddd;}
    
    .customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #333;
      color: white;
    }
    input[type=text1] {
  width: 40%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-image: url('../网页图片/搜索\ \(1\).png');
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 50px;
  margin-left: 400px;
}
 input[type=text2], [type=number2]{
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
} 

.search_btn{
    margin-left: 10px;
    height: 45px;
    width: 70px;
}
.admini{
    background:#eee;
    height:30px;
    width:100px;
    margin-top:-40px;
    border:#DCDCDC 2px solid;
    border-radius:5px;
    text-align:center;
    padding-top:5px;
   
}
.admini:hover{
    background-color:#E6E6FA ;
    color: white;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.logouti{
    background:#eee;
    width:100px;
    height:30px;
    margin-left:200px;
    margin-top:-38px;
    border:#DCDCDC 2px solid;
    border-radius:5px;
    text-align:center;
    padding-top:5px;
}
.logouti:hover{
    background-color:#E6E6FA ;
    color: white;
    box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#add_block{
    display:none;
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}
.add_block-content{
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 40%; 
    text-align: center;
}
.pick{
    display:none;
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}
.top_add{
    background-color: #333;
    height: 40px;
    color: white;
    font-size: x-large;
    margin-top: 0px;
    font-weight: bold;
}
.body{
    overflow-y: scroll;
}
.pick-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 40%; 
}
/* .add_block-content{
    /* background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
} */ 

#mybtn{
    cursor: pointer;
    margin-left: 50%;
   margin-top: -100px;
    background-color: rgb(167, 164, 164); /* Green */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.mybtntn{
    
     margin-left: 1200px;
     margin-top:-50px;
      background-color: rgb(167, 164, 164); 
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.mybtntn:hover{
    background-color: #333;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
    background: #333;
    color: white;
    font-size:20px;
    font-weight: 700;
    height: 40px;
    text-align: center;
    padding-top: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: move;

    /* left: calc(100%-50px); */
}
    </style>
<body>
<form action="counter.php" method="GET">
       <input type="text1" name="Name" placeholder="搜索..."> 
      <button class="search_btn" onclick="formSubmit()">查询</button>
    </form>
    <div  class="admini">
    <a href="admin_detail.php" style="text-decoration: none;"><i class="fa fa-user-circle" ></i><?php echo $_SESSION['username'];?></a>
</div>
    <div class="logouti">
    <a href="logout.php" style="text-decoration: none;" onclick="return confirm('确定退出吗？');"><i class="fa fa-sign-out" ></i>退出登录</a>
   </div>
<div id="add_data">

     <button id="mybtntn" class="mybtntn" onclick="h();">柜台位置</button>
   
    <div id="add_block" >
    <div class="add_block-content">
        <span class="close">&times;</span>
        <p class="titlei">新建柜台</p>
        <div class="add">
            柜台位置：<br>
            <form action="counter_build.php" method="POST">
            <input type="text" name="Name" v-model="obj.name"/>
            <br>
            <br>
            <button onclick="formSubmit()":disabled="!obj.name" >保存</button>
        </form>
        </div>
    </div>
   </div>

    <table class="customers">
        <thead>
            <tr>
            <th>序号</th>
            <th>柜台位置</th>
            <th>所售商品</th>
            <th>负责人</th>
            <th>修改商品</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(list,index) in lists":key="list.id">
            <td>{{index+1}}</td>
            <td>{{list.name}}</td>
            <td>{{list.price}}</td>
            <td>{{list.number}}</td>
            <td>
            <button class="edit"> <span class="delete" @click="off(index)" onclick="<script>location.href='{list.id}'</script>" style="cursor: pointer">下架</span></button>
            <button class="delete"> <span class="edit" @click="edit(list)"  style="cursor: pointer">编辑</span></button>
            <button class="edit">  <span class="delete" @click="del(index)" onclick="<script>location.href='{list.id}'</script>" style="cursor: pointer">删除</span></button>

            </td>
            </tr>
        </tbody>
    </table> 
    
 

        <?php foreach ($result1 as $k => $res):?>
            <form action="counter_add.php" method="POST" >
               
        <input type="text" name="" value=<?php echo$res[1];?> disabled>
        <input type="hidden" name="productid" value="<?php echo $res[0];?>">
                <select name="counterid" id="">
                <option value="" disabled ><-请选择柜台-></option>
                <?php foreach ($result as $i => $res1):?>
                <option value="<?php echo $res1['id'];?>" <?php if ($res1['ProductName']!='') {
    echo "hidden disabled";
}?>><?php echo$res1['CounterName'];?></option>
                <?php endforeach;?>
                </select>
                    <input type="submit" name="" <?php if ($res[2]==0&&$res[3]==0) {
    echo "disabled";
}?>>
                    </form>
        <?php endforeach;?>
            
   
     <!-- 写编辑弹框 -->
    <div id="layer" v-show="flag" class="editblock">
        <div class="contenti">
            <div class="title">
                    编辑
                <span @click="flag=false" ></span>
                
            </div>
           
            <div class="content">
            <form action="./counter_update.php" method="POST">
            <input type="hidden" name="id"   v-model="editObj.id"/>
                <input type="text2" name="Name" placeholder="柜台编号"  v-model="editObj.name"/>               
                <input type="text2" name="product" placeholder="所售商品"  v-model="editObj.price"  readonly/>
                <input type="text2" name="stuff" placeholder="" v-model="editObj.number" readonly/><br>
                <?php foreach ($result2 as $k => $res):?>
                <input type="checkbox" name="manager[]" value=<?php echo $res[0];?>><?php echo $res[1];?>
                <?php endforeach;?>
                <div class="buttontwo">
                <button class="_button" onclick="formSubmit()" @click="update()":disabled="!editObj.name">更新</button>
                </form>
                <a class="_button"  @click="flag=fasel">关闭</a>
            </div> 
            
        </div>
        
    </div>

</div>
 
<script>
    function h(){
var modali = document.getElementById('add_block');
 // 打开弹窗的按钮对象
 var btn2 = document.getElementById('mybtntn');
 // 获取 <span> 元素，用于关闭弹窗
 var span2 = document.querySelector('.close');
 
 // 点击按钮打开弹窗
 btn2.onclick = function() {
     modali.style.display = "block";
     
 }
  
 // 点击 <span> (x), 关闭弹窗
 span2.onclick = function() {
     modali.style.display="none";
 }
  
 // 在用户点击其他地方时，关闭弹窗
 window.onclick = function(event) {
     if (event.target == modali) {
         modali.style.display = "none";
     }
 }

  }
    window.onload=function(){
    new Vue({
        el:"#add_data",
        data:{
            obj:{          
            name:'',
            price:'',
            number:''
            },          
            lists:[<?php echo  $str;?>],
            editObj:{},//编辑
            flag:false//编辑的弹框不显示 
        },
        methods:{
            add:function(){ 
                
               //  let {nam,price,number}=this.obj;   //必填判断
                if(!this.obj.name||!this.obj.price||!this.obj.number) 
                
                 return;
                var _id=Math.max(...this.lists.map(function(item){return item.id}))+1;
                this.lists.push({
                    name:this.obj.name,
                    price:this.obj.price,
                    number:this.obj.number,
                    id:_id
                });
                this.obj={};//清空
            },
            del:function(index){

                location.href='counter_delete.php?id='+this.lists[index].id;
            },
            off:function(index){

        location.href='counter_off.php?id='+this.lists[index].id;
            },
            edit:function(list){
               
                this.editObj={
                    name:list.name,
                    price:list.price,
                    number:list.number,
                    id:list.id
                } ;
                this.flag=true;//弹框显示
            },
            update:function(){
                
                for(var i=0;i<this.lists.length;i++)
                {
                    if(this.lists[i].id==this.editObj.id){
                        this.lists[i]=this.editObj;
                        this.flag=false;//弹框消失
                   
                    }
                }
            }
        }
    })
}

window.addEventListener("load", () => {	

const fillScreen = document.querySelector(".editblock");	
const header = document.querySelector(".title");	
const modelBox = document.querySelector(".contenti");

//移动功能
	
	header.addEventListener("mousedown", (event) => {
		const x = event.pageX - modelBox.offsetLeft;
		const y = event.pageY - modelBox.offsetTop;	
        console.log(x, y);
		document.addEventListener("mousemove", move);
		
		function move(event) {
			modelBox.style.left = event.pageX - x + "px";
			modelBox.style.top = event.pageY - y + "px";
		}
		
		document.addEventListener("mouseup", () => {
			document.removeEventListener("mousemove", move);
		});
	});
});
</script>

</body>
</html>